<template>
  <div class="footer">
    <!-- 上半部分 -->
    <div class="footer-top">
      <!-- 特色服务区域 -->
      <div class="service-features">
        <div class="feature-item">
          <div class="feature-icon">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
              <path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <span class="feature-desc">品種齊全</span>
          <span class="feature-desc">豐富產品線</span>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
              <path
                d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <span class="feature-desc">多倉發貨</span>
          <span class="feature-desc">快速配送</span>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
              <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <span class="feature-desc">品質保證</span>
          <span class="feature-desc">優質服務</span>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round" />
              <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round" />
              <path d="m22 21-3-3m0 0a2 2 0 1 0-2.83-2.83 2 2 0 0 0 2.83 2.83Z" stroke="currentColor" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <span class="feature-desc">人工客服</span>
          <span class="feature-desc">專業諮詢</span>
        </div>
      </div>
    </div>
    <!-- 下半部分 -->
    <div class="footer-bottom">
      <!-- 主要内容区域 -->
      <div class="footer-main">
        <!-- 左侧Logo和公司信息 -->
        <div class="footer-left">
          <div class="logo-section">
            <img src="~/assets/footer/logo.png" alt="家具商城" class="footer-logo-icon" />
          </div>
          <div class="company-desc">
            我們致力於為客戶提供最優質的家具產品，<br>
            擁有豐富的產品線和專業的服務團隊，<br>
            為您打造理想的居家環境，<br>
            讓生活更加美好舒適。
          </div>
        </div>

        <!-- 中间导航链接 -->
        <div class="footer-center">
          <div class="footer-column">
            <h4>客戶服務</h4>
            <ul>
              <li><nuxt-link to="/about_us">關於我們</nuxt-link></li>
              <li><nuxt-link to="/goods_cate">商品購買</nuxt-link></li>
              <li><nuxt-link to="/user?page_type=0">個人中心</nuxt-link></li>
            </ul>
          </div>
          <div class="footer-column">
            <h4>政策中心</h4>
            <ul>
              <li><nuxt-link to="/news_detail?id=1" @click.native="scrollToTop">售後政策</nuxt-link></li>
              <li><nuxt-link to="/news_detail?id=2" @click.native="scrollToTop">物流政策</nuxt-link></li>
              <li><nuxt-link to="/news_detail?id=3" @click.native="scrollToTop">隱私政策</nuxt-link></li>
            </ul>
          </div>
        </div>

        <!-- 右侧联系信息 -->
        <div class="footer-right">
          <h4>聯絡資訊</h4>
          <div class="contact-info">
            <div class="contact-item">
              <i class="iconfont icon-dianhua icon"></i>
              <span>{{ companyInfo.contact_number || '123-456-789' }}</span>
            </div>
            <div class="contact-item">
              <i class="iconfont icon-email icon"></i>
              <span>service@furniture.com.tw</span>
            </div>
            <div class="contact-item">
              <span>{{ companyInfo.company_address || '2118 Thornridge Cir. Syracuse, Connecticut 35624' }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部版权信息 -->
      <div class="footer-copyright">
        <div class="copyright">
          <span>
            &copy; 2025 家具商城. All rights reserved.
          </span>
        </div>
        <div class="social-icons">
          <a href="#" class="social-icon">
            <i class="iconfont icon-facebook"></i>
          </a>
          <a href="#" class="social-icon">
            <i class="iconfont icon-tuite"></i>
          </a>
          <a href="#" class="social-icon">
            <i class="iconfont icon-instagram"></i>
          </a>
          <a href="#" class="social-icon">
            <i class="iconfont icon-linkedin"></i>
          </a>
          <a href="#" class="social-icon">
            <i class="iconfont icon-whatsapp"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="floatWindow">
      <div class="list">
        <div class="item" @click="chatShow">
          <div class="iconfont icon-lianxikefu"></div>
          <div>聯系客服</div>
        </div>
        <div class="item" @mouseleave="wxCodeHide">
          <div @mouseenter="wxCode">
            <div class="iconfont icon-weixin4"></div>
            <div>關註微信</div>
          </div>
          <div class="itemCon" v-if="iScode">
            <div class="ewm">
              <div class="pictrue">
                <div class="arrow"></div>
                <img :src="codeUrl" class="bicode" />
              </div>
              <div class="tip">掃碼關註公众号</div>
            </div>
          </div>
        </div>
        <div class="item" @click="goCart">
          <div class="iconfont icon-cedaohang-gouwuche"></div>
          <div>購物車</div>
        </div>
        <div class="item" @click="goTop">
          <div class="iconfont icon-huidaodingbu1"></div>
          <div>回到頂部</div>
        </div>
      </div>
    </div>
    <div class="kefuIcon" @click="chatShow">
      <div class="pictrue">
        <div class="num" v-if="$auth.loggedIn && $store.state.unreadNum">
          {{ $store.state.unreadNum }}
        </div>
        <img src="~/assets/images/kefuIcon.png" />
      </div>
    </div> -->
  <!-- <chat-room v-show="chatOptions.show" :chat-options="chatOptions" @chat-close="chatClose" @socket-open="socketOpen"
      @socket-error="socketError"></chat-room> -->
</template>

<script>
import ChatRoom from "@/components/ChatRoom";
import appChat from "@/mixins/appChat";
export default {
  name: "footers",
  components: {
    ChatRoom
  },
  mixins: [appChat],
  data() {
    return {
      companyInfo: {},
      codeUrl: "",
      iScode: false
    };
  },
  head() {
    return {
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          content: this.companyInfo.site_keywords
        },
        {
          hid: "description",
          name: "description",
          content: this.companyInfo.site_description
        }
      ]
    };
  },
  created() {
    this.getCompanyInfo();
    this.wechatCode();
  },
  mounted() { },
  methods: {
    scrollToTop() {
      // 強制滾動到頁面頂部
      window.scrollTo(0, 0);
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
    },
    goTop() {
      (function n() {
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        if (t > 0) {
          document.body.scrollTop = 0;
          document.documentElement.scrollTop = 0;
        }
      })();
    },
    wxCode() {
      this.iScode = true;
    },
    wxCodeHide() {
      this.iScode = false;
    },
    goCart() {
      this.$router.push({ path: "/shoppingCart" });
    },
    wechatCode() {
      this.$axios.get("/pc/get_wechat_qrcode").then(res => {
        this.codeUrl = res.data.wechat_qrcode;
      });
    },
    getCompanyInfo() {
      this.$axios.get("/pc/get_company_info").then(res => {
        this.companyInfo = res.data;
        // this.$store.commit("logo", res.data.logoUrl);
        // this.$store.commit("homeMenus", res.data.pc_home_menus);
        // this.$cookies.set("logo", res.data.logoUrl);
        this.$store.commit("titles", res.data.site_name);
        this.$cookies.set("titles", res.data.site_name);
      });
    }
  }
};
</script>

<style scoped lang="scss">
@import '~/assets/css/variables.scss';
@import '~/assets/iconfont/iconfont.css';
// .kefuIcon {
//   position: fixed;
//   right: 9px;
//   bottom: 9%;
//   width: 56px;
//   height: 56px;
//   margin-bottom: 300px;
//   z-index: 99;
//   display: none;
//   cursor: pointer;
//   transition: all 0.3s ease;

//   &:hover {
//     transform: scale(1.1);
//   }

//   .pictrue {
//     width: 100%;
//     height: 100%;
//     position: relative;
//     border-radius: 50%;
//     overflow: hidden;
//     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

//     .num {
//       position: absolute;
//       padding: 0 4px;
//       height: 16px;
//       line-height: 16px;
//       border-radius: 10px;
//       background-color: #fc4141;
//       color: #fff;
//       right: 0;
//       top: 0;
//       font-size: 12px;
//       min-width: 16px;
//       text-align: center;
//       z-index: 1;
//     }

//     img {
//       width: 100%;
//       height: 100%;
//       object-fit: cover;
//     }
//   }
// }

// .floatWindow {
//   position: fixed;
//   right: 0;
//   bottom: 15%;
//   width: 70px;
//   z-index: 99;
//   cursor: pointer;
//   background-color: rgba(44, 44, 44, 0.95);
//   backdrop-filter: blur(10px);
//   box-shadow: 0 3px 20px rgba(0, 0, 0, 0.3);
//   border-radius: 8px 0 0 8px;
//   display: none;

//   .list {
//     .item {
//       position: relative;
//       width: 100%;
//       height: 74px;
//       text-align: center;
//       font-size: 12px;
//       color: rgba(255, 255, 255, 0.8);
//       padding: 12px 0;
//       transition: all 0.3s ease;

//       &:hover {
//         color: $text-white;
//         background-color: rgba(255, 255, 255, 0.1);
//       }

//       .iconfont {
//         margin-bottom: 5px;
//         font-size: 25px;
//       }

//       &~.item {
//         &:before {
//           position: absolute;
//           content: " ";
//           width: 48px;
//           height: 1px;
//           background-color: rgba(255, 255, 255, 0.2);
//           top: 0;
//           left: 50%;
//           margin-left: -24px;
//         }
//       }

//       .itemCon {
//         right: 100%;
//         position: absolute;
//         top: 0;
//         padding-right: 20px;

//         .ewm {
//           width: 140px;
//           border: 1px solid rgba(255, 255, 255, 0.2);
//           background-color: rgba(44, 44, 44, 0.95);
//           backdrop-filter: blur(10px);
//           padding: 8px 6px;
//           border-radius: 8px;

//           .tip {
//             font-size: 14px;
//             color: rgba(255, 255, 255, 0.8);
//             margin-top: 6px;
//           }

//           .pictrue {
//             width: 126px;
//             height: 126px;
//             vertical-align: middle;
//             position: relative;

//             img {
//               width: 100%;
//               height: 100%;
//               border-radius: 4px;
//             }

//             .arrow {
//               position: absolute;
//               right: -16px;
//               top: 10px;
//               width: 0px;
//               height: 0px;
//               border: 8px solid transparent;
//               border-left-color: rgba(255, 255, 255, 0.2);

//               &:before {
//                 position: absolute;
//                 left: -8px;
//                 top: -7px;
//                 content: "";
//                 width: 0px;
//                 height: 0px;
//                 border: 7px solid transparent;
//                 border-left-color: rgba(44, 44, 44, 0.95);
//               }
//             }
//           }
//         }
//       }
//     }
//   }
// }

.footer {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  letter-spacing: 1px;

  // 上半部分
  .footer-top {
    background: url('~/assets/footer/footer-bg.png') no-repeat center center;
    background-size: cover;
    background-color: #2c2c2c;
    position: relative;
    flex: 0 0 53vh;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.3);
    }

    .service-features {
      position: absolute;
      left: 50%;
      bottom: 28%;
      transform: translateX(-50%);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      max-width: 1200px;
      width: 90%;
      z-index: 2;

      @media (max-width: 1024px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }

      @media (max-width: 640px) {
        grid-template-columns: 1fr;
        gap: 16px;
        width: 95%;
      }

      .feature-item {
        text-align: center;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        padding: 32px 24px;
        color: $text-white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        position: relative;
        overflow: hidden;
        min-height: 180px;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          opacity: 0;
          transition: opacity 0.4s ease;
        }

        .feature-desc {
          font-size: 14px;
          line-height: 1.4;
          color: rgba(255, 255, 255, 0.9);
          position: relative;
          z-index: 1;
          margin-bottom: 4px;
          font-weight: 500;

          &:first-of-type {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
          }
        }

        .feature-icon {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 72px;
          height: 72px;
          margin: 0 auto 24px;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          position: relative;
          z-index: 1;

          svg {
            width: 36px;
            height: 36px;
            stroke: currentColor;
            stroke-width: 2;
          }
        }

        &:hover {
          transform: translateY(-8px);
          background: rgba(255, 255, 255, 0.12);
          border-color: rgba(255, 255, 255, 0.2);
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.2);
          color: $text-white;

          &::before {
            opacity: 1;
          }

          .feature-icon {
            transform: scale(1.1);
            color: $primary-color;
          }

          .feature-desc {
            color: $text-white;
          }
        }
      }
    }
  }

  // 下半部分
  .footer-bottom {
    background-color: #222222;
    color: $text-white;
    flex: 0 0 40vh;

    // 主要内容区域
    .footer-main {
      height: 100%;
      width: 100%;
      padding: 0 min(160px, 8vw);
      margin: 0 auto;
      display: grid;
      padding-top: 96px;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      align-items: start;

      // 左侧Logo区域
      .footer-left {
        .logo-section {
          display: flex;
          align-items: center;
          margin-bottom: 40px;

          .footer-logo-icon {
            height: 28px;
            object-fit: contain;
          }
        }

        .company-desc {
          font-size: 14px;
          line-height: 1.6;
          color: rgba(255, 255, 255, 0.7);
        }
      }

      // 中间导航区域
      .footer-center {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        justify-content: center;
        align-items: start;

        .footer-column {
          text-align: left;

          h4 {
            font-size: 18px;
            font-weight: 600;
            color: $text-white;
            margin-bottom: 30px;
            margin-top: 0;
            line-height: 1.2;
          }

          ul {
            list-style: none;
            padding: 0;
            margin: 0;

            li {
              margin-bottom: 16px;

              a {
                color: rgba(255, 255, 255, 0.7);
                text-decoration: none;
                font-size: 14px;
                transition: color 0.3s ease;

                &:hover {
                  color: $primary-color;
                }
              }
            }
          }
        }
      }

      // 右侧联系信息
      .footer-right {
        padding-left: 20px;

        h4 {
          font-size: 18px;
          font-weight: 600;
          color: $text-white;
          margin-bottom: 30px;
          margin-top: 0;
          line-height: 1.2;
        }

        .contact-info {
          margin-bottom: 30px;

          .contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 15px;

            .icon {
              font-size: 16px;
              margin-right: 10px;
              color: rgba(255, 255, 255, 0.7);
              flex-shrink: 0;
              margin-top: 2px;
            }

            span {
              font-size: 14px;
              color: rgba(255, 255, 255, 0.7);
              line-height: 1.4;
            }
          }
        }
      }
    }
  }

  .footer-copyright {
    display: flex;
    align-items: flex-start;
    background-color: #222222;
    width: 100%;
    height: 80px;
    flex: 0 0 7vh;
    padding: 0 min(160px, 8vw);
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: -20px;
      left: min(160px, 8vw);
      right: min(160px, 8vw);
      height: 1px;
      background-color: rgba(255, 255, 255, 0.8);
    }

    .copyright {
      width: 100%;
    }

    .social-icons {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;

      .social-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        transition: all 0.3s ease;
        color: #333333;

        &:hover {
          background: rgba(255, 255, 255, 1);
          color: #000000;
          transform: translateY(-2px);
        }

        .iconfont {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
